﻿<template>
  <div class="app-container">
    <div class="filter-title">
      <el-form label-position="right" label-width="110px">
        <el-form-item :label="$t('operations.name')+' :'">
          <el-input
            v-model="listQuery.name"
            style="width: 150px"
            class="filter-item"
            :placeholder="$t('operations.name')"
            @keyup.enter.native="handleFilter"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('operations.type')+' :'">
          <el-select
            v-model="listQuery.region_type"
            clearable
            style="width: 150px"
            class="filter-item"
            :placeholder="$t('operations.type')"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('public.linkman')+' :'">
          <el-input
            v-model="listQuery.linkman"
            style="width: 150px"
            class="filter-item"
            :placeholder="$t('public.linkman')"
            @keyup.enter.native="handleFilter"
          ></el-input>
        </el-form-item>
        <el-button
          style="margin-left:20px"
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
        >{{ $t('table.search') }}</el-button>
        <el-button
          v-if="permission.add && regionType!==3"
          style="margin-left: 10px;float:right"
          class="filter-item"
          type="primary"
          icon="el-icon-edit"
          @click="handleCreate"
        >{{ $t('table.add') }}</el-button>
        <el-button
          style="margin-left: 10px"
          class="filter-item"
          type="primary"
          @click="handleRefresh"
        >{{ $t('table.refresh') }}</el-button>
        <div v-show="!showSearchItem" class="showDown" @click="showSearchItem = true">
          <i class="el-icon-d-arrow-right"></i>
        </div>
        <div v-show="showSearchItem" class="showUp" @click="showSearchItem = false">
          <i class="el-icon-d-arrow-left"></i>
        </div>
      </el-form>
    </div>
    <div v-show="showSearchItem" class="filter-container">
      <el-form label-position="right" label-width="110px">
        <el-form-item :label="$t('public.mobile')+' :'">
          <el-input
            v-model="listQuery.linkman_mobile"
            style="width: 150px"
            class="filter-item"
            :placeholder="$t('public.mobile')"
            @keyup.enter.native="handleFilter"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('operations.region')+' :'">
          <el-input
            v-model="listQuery.region_name"
            style="width: 150px"
            class="filter-item"
            :placeholder="$t('operations.region')"
            @keyup.enter.native="handleFilter"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('public.status')+' :'">
          <el-select
            v-model="listQuery.status"
            clearable
            style="width: 150px"
            class="filter-item"
            :placeholder="$t('public.status')"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255,255,255,0.2)"
      border
      fit
      highlight-current-row
      style="width: 100%min-height:1000px"
    >
      <el-table-column fixed="left" align="center" :label="$t('table.id')" width="65">
        <template slot-scope="scope">
          <span>{{ (listQuery.page-1)*listQuery.limit+scope.$index+1 }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('operations.name')">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('operations.region')">
        <template slot-scope="scope">
          <span>{{ scope.row.region_name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('public.linkman')">
        <template slot-scope="scope">
          <span>{{ scope.row.linkman }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('public.mobile')">
        <template slot-scope="scope">
          <span>{{ scope.row.linkman_mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('operations.type')">
        <template slot-scope="scope">
          <span>{{ operationsTypeEs(scope.row.region_type) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('order.adCurrency')">
        <template slot-scope="scope">
          <span>{{ scope.row.ad_currency }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('order.extraCurrency')">
        <template slot-scope="scope">
          <span>{{ scope.row.extra_currency }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('public.createTime')">
        <template slot-scope="scope">
          <span>{{ scope.row.create_time }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('public.status')">
        <template slot-scope="scope">
          <span :class="statusColor(scope.row.status)">{{ disableEs(scope.row.status) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('table.actions')"
        :width="operWidth"
        class-name="small-padding fixed-width"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="handleRead(scope.row)"
          >{{ $t('table.read') }}</el-button>
          <el-button
            v-if="permission.update"
            type="primary"
            size="mini"
            @click="handleUpdate(scope.row)"
          >{{ $t('table.edit') }}</el-button>
          <el-button
            v-if="scope.row.status === 1 && permission.disable"
            type="danger"
            size="mini"
            @click="handleDisable(scope.row)"
          >{{ $t('table.disable') }}</el-button>
          <el-button
            v-else-if="permission.disable"
            type="success"
            size="mini"
            @click="handleEnable(scope.row)"
          >{{ $t('table.enable') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        background
        :current-page="listQuery.page"
        :page-sizes="[10,20,30,50]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <!-- 编辑 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="950px">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="right"
        label-width="35%"
        style="width: 400px margin-left:120px"
        size="small"
      >
        <div class="pops">
          <div class="popUp left">
            <span class="information-title">基础信息:</span>
            <el-form-item :label="$t('operations.name')+' :'" prop="name">
              <el-input v-model="temp.name"></el-input>
            </el-form-item>
            <el-form-item :label="$t('public.linkman')+' :'" prop="linkman">
              <el-input v-model="temp.linkman"></el-input>
            </el-form-item>
            <el-form-item :label="$t('public.mobile')+' :'" prop="linkman_mobile">
              <el-input v-model="temp.linkman_mobile"></el-input>
            </el-form-item>
            <el-form-item
              v-if="regionType < 3"
              :label="$t('operations.type')+' :'"
              prop="region_type"
            >
              <el-select
                v-model="temp.region_type"
                clearable
                style="width: 150px"
                class="filter-item"
                :placeholder="$t('operations.type')"
                @change="resetArea"
              >
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="temp.region_type"
              :label="$t('operations.region')+' :'"
              prop="region_id"
            >
              <select-page
                :id="temp.region_id"
                :name="temp.region_name"
                style="width:200px"
                placeholder="请选择区域"
                :data="areaOptions"
                :count="areaCount"
                :page-size="pageSize"
                key-field="id"
                show-field="name"
                @getList="getAreaList"
                @values="getAreaid"
              ></select-page>
            </el-form-item>
            <el-form-item :label="$t('equipment.type')+' :'" prop="equipment_show">
              <el-input v-model="temp.equipment_show" style="display:none"></el-input>
              <multiple-selection
                v-if="dialogStatus!=='review'"
                :picked="equipmentType_picked"
                placeholder="请选择设备类型"
                key-field="id"
                show-field="name"
                :data="equipmentTypeOptions"
                :count="equipmentTypeCount"
                :page-size="pageSize"
                style="width:210px"
                multiple
                @getList="(pageNumber, search)=>{return getListType(pageNumber, search,'getEquipmentType')}"
                @values="getEquipmentTypeid"
              ></multiple-selection>
            </el-form-item>
            <el-form-item :label="$t('operations.deadline')+' :'" prop="deadline">
              <el-select
                v-model="temp.deadline"
                clearable
                style="width: 150px"
                class="filter-item"
                :placeholder="$t('operations.deadline')"
                prop="deadline"
              >
                <el-option
                  v-for="item in deadlineOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <span class="information-title">支付信息:</span>
            <el-form-item :label="$t('operations.bankAccountName')+' :'" prop="bank_account_name">
              <el-input v-model="temp.bank_account_name"></el-input>
            </el-form-item>
            <el-form-item
              :label="$t('operations.bankAccountNumber')+' :'"
              prop="bank_account_number"
            >
              <el-input v-model="temp.bank_account_number"></el-input>
            </el-form-item>
            <el-form-item :label="$t('operations.bankName')+' :'" prop="bank_name">
              <el-input v-model="temp.bank_name"></el-input>
            </el-form-item>
            <el-form-item :label="$t('operations.bankAddress')+' :'" prop="bank_address">
              <el-input v-model="temp.bank_address"></el-input>
            </el-form-item>
            <el-form-item v-if="dialogStatus!='create'" :label="$t('public.createTime')+' :'">
              <span>{{ temp.create_time }}</span>
            </el-form-item>
            <el-form-item
              v-if="dialogStatus!='create'"
              :label="$t('public.status')+' :'"
              prop="status"
            >
              <span v-if="dialogStatus=='edit'">{{ disableEs(temp.status) }}</span>
              <el-radio-group v-else v-model="temp.status">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="2">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="popUp right">
            <span class="information-title">收费模式:</span>
            <el-form-item :label="$t('operations.chargeType')+' :'" prop="charge_type">
              <el-select
                v-model="temp.charge_type"
                clearable
                style="width: 150px"
                class="filter-item"
                :placeholder="$t('operations.chargeType')"
              >
                <el-option
                  v-for="item in chargeTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('operations.chargeRatio')+' :'" prop="charge_ratio">
              <el-input-number v-model="temp.charge_ratio"></el-input-number>&nbsp;%
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button
          v-if="dialogStatus=='create'"
          type="primary"
          :disabled="!createDisabled"
          @click="createData"
        >{{ $t('table.confirm') }}</el-button>
        <el-button
          v-else
          type="primary"
          :disabled="!updateDisabled"
          @click="updateData"
        >{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>

    <!-- 查看 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormRead" width="950px">
      <el-form
        :model="temp"
        label-position="right"
        label-width="40%"
        style="width: 400px margin-left:120px"
      >
        <div class="pops">
          <div class="popUp left">
            <span class="information-title">基础信息:</span>
            <el-form-item :label="$t('operations.name')+' :'" prop="name">
              <span>{{ temp.name }}</span>
            </el-form-item>
            <el-form-item :label="$t('public.linkman')+' :'" prop="linkman">
              <span>{{ temp.linkman }}</span>
            </el-form-item>
            <el-form-item :label="$t('public.mobile')+' :'" prop="linkman_mobile">
              <span>{{ temp.linkman_mobile }}</span>
            </el-form-item>
            <el-form-item v-if="regionType < 3" :label="$t('operations.type')+' :'">
              <span>{{ operationsTypeEs(temp.region_type) }}</span>
            </el-form-item>
            <el-form-item v-if="temp.region_type" :label="$t('operations.region')+' :'">
              <span>{{ temp.region_name }}</span>
            </el-form-item>
            <el-form-item :label="$t('equipment.type')+' :'">
              <span>{{ temp.equipment_type_name }}</span>
            </el-form-item>
            <el-form-item :label="$t('operations.deadline')+' :'">
              <span>{{ yearsEs(temp.deadline) }}</span>
            </el-form-item>
            <span class="information-title">支付信息:</span>
            <el-form-item :label="$t('operations.bankAccountName')+' :'">
              <span>{{ temp.bank_account_name }}</span>
            </el-form-item>
            <el-form-item :label="$t('operations.bankAccountNumber')+' :'">
              <span>{{ temp.bank_account_number }}</span>
            </el-form-item>
            <el-form-item :label="$t('operations.bankName')+' :'">
              <span>{{ temp.bank_name }}</span>
            </el-form-item>
            <el-form-item :label="$t('operations.bankAddress')+' :'">
              <span>{{ temp.bank_address }}</span>
            </el-form-item>
            <el-form-item v-if="dialogStatus!='create'" :label="$t('public.createTime')+' :'">
              <span>{{ temp.create_time }}</span>
            </el-form-item>
            <el-form-item :label="$t('public.status')+' :'">
              <span>{{ disableEs(temp.status) }}</span>
            </el-form-item>
          </div>
          <div class="popUp right">
            <span class="information-title">收费模式:</span>
            <el-form-item :label="$t('operations.chargeType')+' :'">
              <span>{{ chargeTypeEs(temp.charge_type) }}</span>
            </el-form-item>
            <el-form-item :label="$t('operations.chargeRatio')+' :'">
              <span>{{ temp.charge_ratio }}&nbsp;%</span>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import selectPage from "@/views/select/SelectPage"; // 分页选择控件
import MultipleSelection from "@/views/select/MultipleSelection"; // 分页选择控件
import Cookies from "js-cookie";

export default {
  name: "Itoc",
  components: {
    "select-page": selectPage,
    "multiple-selection": MultipleSelection
  },
  data() {
    const validateName = (rule, value, callback) => {
      // return false
      if (value.length > 0) {
        if (value.length > 20) {
          callback(new Error("名称长度不能大于20个字符"));
        } else {
          var reg = /^(?!(\d+)$)(?!(\_+)$)[\u4e00-\u9fff\w]+$/; /* 定义验证表达式 */
          if (reg.test(value)) {
            /* 进行验证 */
            callback();
          } else {
            callback(
              new Error("名称只能包含汉字、英文、“_”和数字且不为纯数字或纯符号")
            );
          }
        }
      } else {
        callback(new Error("请填写名称"));
      }
    };
    const validateLinkman = (rule, value, callback) => {
      // return false
      if (value.length > 0) {
        if (value.length > 16) {
          callback(new Error("名称长度不能大于16个字符"));
        } else {
          var reg = /^(?!(\d+)$)(?!(\_+)$)(?!(\、+)$)[\u4e00-\u9fff\w\、]+$/; /* 定义验证表达式 */
          if (reg.test(value)) {
            /* 进行验证 */
            callback();
          } else {
            callback(
              new Error(
                "联系人只能包含汉字、英文、“_”、“（”、“）”和数字且不为纯数字或纯符号"
              )
            );
          }
        }
      } else {
        callback(new Error("请填写联系人"));
      }
    };
    const validateLinkmanMobile = (rule, value, callback) => {
      // return false
      if (value.length > 0) {
        var reg = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/; /* 定义验证表达式 */
        if (reg.test(value)) {
          /* 进行验证 */
          callback();
        } else {
          callback(new Error("请输入正确的联系电话"));
        }
      } else {
        callback(new Error("请填写联系电话"));
      }
    };
    const bankAccountName = (rule, value, callback) => {
      // return false
      if (value.length > 0) {
        if (value.length > 16) {
          callback(new Error("长度不能大于16个字符"));
        } else {
          var reg = /^(?!(\d+)$)(?!(\_+)$)(?!(\、+)$)[\u4e00-\u9fff\w\、]+$/; /* 定义验证表达式 */
          if (reg.test(value)) {
            /* 进行验证 */
            callback();
          } else {
            callback(
              new Error(
                "银行开户名只能包含汉字、英文、“_”、“（”、“）”和数字且不为纯数字或纯符号！"
              )
            );
          }
        }
      } else {
        callback(new Error("请填写银行开户名！"));
      }
    };
    const bankAccountNumber = (rule, value, callback) => {
      if (value.length > 0) {
        var reg = /^([1-9]{1})(\d{14}|\d{18})$/; /* 银行卡号验证 */
        if (reg.test(value)) {
          /* 进行验证 */
          callback();
        } else {
          callback(new Error("请输入正确的银行账号！"));
        }
      } else {
        callback(new Error("请填写银行账号！"));
      }
    };
    const equipmentShow = (rule, value, callback) => {
      if (this.temp.equipment_show) {
        callback();
      } else {
        callback(new Error("请选择设备！"));
      }
    };
    const charge_ratio = (rule, value, callback) => {
      if (value || value === 0) {
        if (value > 0 && value < 100) {
          callback();
        } else {
          callback(new Error("收费比例大于0小于100！"));
        }
      } else {
        callback();
      }
    };
    return {
      showSearchItem: false,
      tableKey: 0,
      list: null,
      total: null,
      regionType: null,
      regionId: null,
      listLoading: true,
      statusOptions: [
        {
          value: 1,
          label: "正常"
        },
        {
          value: 2,
          label: "禁用"
        }
      ],
      typeOptions: [
        {
          value: 1,
          label: "省级运营中心"
        },
        {
          value: 2,
          label: "市级运营中心"
        },
        {
          value: 3,
          label: "区级运营中心"
        }
      ],
      deadlineOptions: [
        {
          value: 1,
          label: "1年"
        },
        {
          value: 2,
          label: "2年"
        },
        {
          value: 3,
          label: "3年"
        },
        {
          value: 99,
          label: "不限"
        }
      ],
      chargeTypeOptions: [
        {
          value: 1,
          label: "运营中心收费抽成"
        },
        {
          value: 2,
          label: "总部收费分成"
        }
      ],
      listQuery: {
        page: 1,
        limit: 20,
        name: "",
        code: "",
        status: "",
        linkname: "",
        linkname_mobile: "",
        region_name: "",
        region_type: ""
      },
      temp: {
        id: undefined,
        pid: "",
        name: "",
        linkman: "",
        linkman_mobile: "",
        region_id: undefined,
        region_name: "",
        region_type: "",
        equipment_type: "",
        charge_ratio: undefined,
        bank_account_name: "",
        bank_account_number: "",
        bank_name: "",
        bank_address: "",
        deadline: "",
        charge_type: "",
        equipment_show: ""
      },
      equipmentType_picked: [],
      dialogFormVisible: false,
      dialogFormRead: false,
      dialogStatus: "",
      textMap: {
        edit: "编辑",
        create: "添加",
        review: "审核",
        read: "查看"
      },
      rules: {
        name: [{ required: true, trigger: "blur", validator: validateName }],
        linkman: [
          { required: true, trigger: "blur", validator: validateLinkman }
        ],
        linkman_mobile: [
          { required: true, trigger: "blur", validator: validateLinkmanMobile }
        ],
        region_id: [
          { required: true, message: "请选择区域", trigger: "change" }
        ],
        region_type: [
          { required: true, message: "请选择运营中心类型", trigger: "change" }
        ],
        equipment_show: [
          { required: true, trigger: "change", validator: equipmentShow }
        ],
        deadline: [
          { required: true, message: "请选择有效期", trigger: "change" }
        ],
        bank_account_name: [
          { required: true, trigger: "blur", validator: bankAccountName }
        ],
        bank_account_number: [
          { required: true, trigger: "blur", validator: bankAccountNumber }
        ],
        bank_name: [
          {
            required: true,
            message: "请输入开户银行支行名称",
            trigger: "blur"
          }
        ],
        bank_address: [
          { required: true, message: "开户银行所在地", trigger: "blur" }
        ],
        charge_type: [
          { required: true, message: "收费方式", trigger: "change" }
        ],
        charge_ratio: [
          { required: true, trigger: "blur", validator: charge_ratio }
        ],
        status: [{ required: true, message: "请审核", trigger: "change" }]
      },
      createDisabled: true,
      updateDisabled: true,
      loading: false,
      areaOptions: [],
      areaCount: undefined,
      equipmentTypeOptions: [],
      equipmentTypeCount: undefined,
      pageSize: 20,
      permission: {
        add: false,
        disable: false,
        update: false
      }
    };
  },
  computed: {
    operWidth: function() {
      let itemCount = 1;
      if (this.permission.disable) {
        itemCount += 1;
      }
      if (this.permission.update) {
        itemCount += 1;
      }
      return itemCount * 80 + "px";
    }
  },
  created() {
    if (this.$store.state.permission.jurisdiction === "*") {
      this.permission.add = true;
      this.permission.update = true;
      this.permission.disable = true;
    } else {
      const jurisdiction = this.$store.state.permission.jurisdiction.split(",");
      jurisdiction.forEach(element => {
        const id = parseInt(element);
        if (id === 127) {
          this.permission.add = true;
        } else if (id === 128) {
          this.permission.disable = true;
        } else if (id === 129) {
          this.permission.update = true;
        }
      });
    }

    this.regionId = JSON.parse(Cookies.get("admin_token")).id;
    this.regionType = JSON.parse(Cookies.get("admin_token")).region_type;
    this.getList();
    if (this.regionType === 1) {
      this.typeOptions = [
        {
          value: 2,
          label: "市级运营中心"
        },
        {
          value: 3,
          label: "区级运营中心"
        }
      ];
    } else if (this.regionType === 2) {
      this.typeOptions = [
        {
          value: 3,
          label: "区级运营中心"
        }
      ];
    }
  },
  methods: {
    getAreaList(pageNumber = 1, search = "") {
      this.getArea(pageNumber, search);
    },
    getAreaid(data) {
      if (data.length > 0) {
        this.temp.region_id = data[0].id;
        this.temp.region_name = data[0].name;
      } else {
        this.temp.region_id = undefined;
        this.temp.region_name = "";
      }
    },
    getListType(pageNumber = 1, search = "", name) {
      this[name](pageNumber, search);
    },
    getEquipmentTypeid(data) {
      this.equipmentType_picked = data;
      if (data.length > 0) {
        this.temp.equipment_show = 1;
      } else {
        this.temp.equipment_show = "";
      }
    },
    getList() {
      this.listLoading = true;
      const data = {
        rows: this.listQuery.limit,
        page: this.listQuery.page
      };
      if (this.listQuery.name) {
        data["name"] = this.listQuery.name;
      }
      if (this.listQuery.code) {
        data["code"] = this.listQuery.code;
      }
      if (this.listQuery.status) {
        data["status"] = this.listQuery.status;
      }
      if (this.listQuery.linkman) {
        data["linkman"] = this.listQuery.linkman;
      }
      if (this.listQuery.linkman_mobile) {
        data["linkman_mobile"] = this.listQuery.linkman_mobile;
      }
      if (this.listQuery.region_name) {
        data["region_name"] = this.listQuery.region_name;
      }
      if (this.listQuery.region_type || this.listQuery.region_type === 0) {
        data["region_type"] = this.listQuery.region_type;
      }
      const itocIndexPath = {
        // 获取运营中心档案列表
        company: "STQ",
        api: "pc_itoc_index",
        version: "1.0",
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(itocIndexPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        pid: "",
        name: "",
        linkman: "",
        linkman_mobile: "",
        region_id: undefined,
        region_name: "",
        region_type: "",
        equipment_type: "",
        charge_ratio: undefined,
        bank_account_name: "",
        bank_account_number: "",
        bank_name: "",
        bank_address: "",
        deadline: "",
        charge_type: ""
      };
      this.equipmentType_picked = [];
    },
    resetArea() {
      this.areaOptions = [];
      this.temp.region_id = "";
    },
    handleRefresh() {
      this.listQuery = {
        page: 1,
        limit: 20,
        id: undefined
      };
      this.getList();
    },
    handleCreate() {
      this.resetTemp();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    getPicked(item) {
      const id = [];
      const name = [];
      this[item].forEach(element => {
        id.push(element.id);
        name.push(element.name);
      });
      return { id: id.join(","), name: name.join(",") };
    },
    createData() {
      // 添加运营中心档案
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (this.createDisabled) {
            this.createDisabled = false;
            const data = {
              pid: this.regionId,
              name: this.temp.name,
              linkman: this.temp.linkman,
              linkman_mobile: this.temp.linkman_mobile,
              region_id: this.temp.region_id,
              region_name: this.temp.region_name,
              region_type: this.temp.region_type,
              charge_ratio: this.temp.charge_ratio,
              bank_account_name: this.temp.bank_account_name,
              bank_account_number: this.temp.bank_account_number,
              bank_name: this.temp.bank_name,
              bank_address: this.temp.bank_address,
              deadline: this.temp.deadline,
              charge_type: this.temp.charge_type
            };
            if (this.equipmentType_picked.length > 0) {
              const pickedData = this.getPicked("equipmentType_picked");
              data["equipment_type"] = pickedData.id;
              data["equipment_type_name"] = pickedData.name;
            } else {
              data["equipment_type"] = "";
              data["equipment_type_name"] = "";
            }
            const itocAddPath = {
              company: "STQ",
              api: "pc_itoc_add",
              version: "1.0",
              data: data
            };
            this.socketApi.sendSock(JSON.stringify(itocAddPath), res => {
              if (res) {
                this.socketData(res);
              }
              setTimeout(() => {
                this.createDisabled = true;
              }, 1000);
            });
          }
        }
      });
    },
    handleUpdate(row) {
      // 打开编辑弹窗
      this.temp = Object.assign({}, row); // copy obj
      if (this.temp.equipment_type_name) {
        const equipmentType = [];
        const equipment_type = this.temp.equipment_type.split(",");
        const equipment_type_name = this.temp.equipment_type_name.split(",");
        for (let i = 0; i < equipment_type.length; i++) {
          equipmentType.push({
            id: parseInt(equipment_type[i]),
            name: equipment_type_name[i]
          });
        }
        this.equipmentType_picked = equipmentType;
        this.temp.equipment_show = 1;
      } else {
        this.equipmentType_picked = [];
        this.temp.equipment_show = "";
      }
      this.dialogStatus = "edit";
      this.dialogFormVisible = true;
      // this.areaOptions = [{id:this.temp.region_id, region_name:this.temp.region_name}]
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    handleRead(row) {
      // 打开查看弹窗
      this.temp = Object.assign({}, row); // copy obj
      this.dialogStatus = "read";
      this.dialogFormRead = true;
    },
    handleDisable(row) {
      // 禁用运营中心档案
      const itocEditPath = {
        company: "STQ",
        api: "pc_itoc_edit",
        version: "1.0",
        data: {
          id: row.id,
          status: 2
        }
      };
      this.socketApi.sendSock(JSON.stringify(itocEditPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    handleEnable(row) {
      // 启用运营中心档案
      const itocEditPath = {
        company: "STQ",
        api: "pc_itoc_edit",
        version: "1.0",
        data: {
          id: row.id,
          status: 1
        }
      };
      this.socketApi.sendSock(JSON.stringify(itocEditPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    updateData() {
      // 更新运营中心档案
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (this.updateDisabled) {
            this.updateDisabled = false;
            const data = {
              id: this.temp.id,
              name: this.temp.name,
              linkman: this.temp.linkman,
              linkman_mobile: this.temp.linkman_mobile,
              region_id: this.temp.region_id,
              region_name: this.temp.region_name,
              region_type: this.temp.region_type,
              charge_ratio: this.temp.charge_ratio,
              bank_account_name: this.temp.bank_account_name,
              bank_account_number: this.temp.bank_account_number,
              bank_name: this.temp.bank_name,
              bank_address: this.temp.bank_address,
              deadline: this.temp.deadline,
              charge_type: this.temp.charge_type
            };

            if (this.equipmentType_picked.length > 0) {
              const pickedData = this.getPicked("equipmentType_picked");
              data["equipment_type"] = pickedData.id;
              data["equipment_type_name"] = pickedData.name;
            } else {
              data["equipment_type"] = "";
              data["equipment_type_name"] = "";
            }

            const itocEditPath = {
              company: "STQ",
              api: "pc_itoc_edit",
              version: "1.0",
              data: data
            };
            this.socketApi.sendSock(JSON.stringify(itocEditPath), res => {
              if (res) {
                this.socketData(res);
              }
              setTimeout(() => {
                this.updateDisabled = true;
              }, 1000);
            });
          }
        }
      });
    },
    // 区域选择
    getArea(pageNumber, search) {
      const areaIndexPath = {
        company: "STQ",
        api: "pc_region_index",
        version: "1.0",
        data: {
          region_type: this.temp.region_type,
          name: search,
          page: pageNumber,
          rows: this.pageSize
        }
      };
      this.socketApi.sendSock(JSON.stringify(areaIndexPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    getEquipmentType(pageNumber, search) {
      const areaIndexPath = {
        company: "STQ",
        api: "pc_equipmentType_index",
        version: "1.0",
        data: {
          name: search,
          page: pageNumber,
          rows: this.pageSize,
          returnType: "eqTypeOption"
        }
      };
      this.socketApi.sendSock(JSON.stringify(areaIndexPath), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (resj.api === "pc_region_index") {
            const options = [];
            resj.data.forEach(element => {
              options.push({ id: element.id, name: element.region_name });
            });
            this.areaOptions = options;
            this.areaCount = resj.count;
          } else if (resj.api === "pc_itoc_edit") {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
              duration: 2000
            });
          } else if (resj.api === "pc_itoc_add") {
            this.dialogFormVisible = false;
            this.getList();
            this.$notify({
              title: "成功",
              message: "添加成功",
              type: "success",
              duration: 2000
            });
          } else if (resj.api === "pc_itoc_index") {
            this.total = resj.count;
            this.list = resj.data;
            this.listLoading = false;
          } else if (
            resj.api === "pc_equipmentType_index" &&
            resj.type === "eqTypeOption"
          ) {
            this.equipmentTypeOptions = resj.data;
            this.equipmentTypeCount = resj.count;
          }
        }
      }
    }
  }
};
</script>
